// @import '../../app.wxss';

.calendar-container {
    width: fit-content;
    background-color: #fff; 
    margin: 0 auto;
    border-radius: 18rpx;
    overflow: hidden;
}

.date-info-box {
    padding: 30rpx 40rpx;
    background-color: #292c35;
    .date-year {
        font-size: 32rpx;
        color: hsla(0, 0%, 100%, 0.8);
        padding-bottom: 10rpx;
        font-weight: bold;
    }
    .date-day {
        font-size: 46rpx;
        color: #fff;
        font-weight: bold;
    }
}

.changing-month {
    width: 100%;
    padding:20rpx 30rpx;
    display: flex;
    align-items: center;
    background-color: hsl(0, 0%, 97%);
    border-bottom: 1rpx solid hsl(0, 0%, 90%);
    justify-content: space-between;
    .plus,
    .reduce {
        width: 64rpx;
        height: 64rpx;
        border-radius: 16rpx;
        background-color: hsl(0, 0%, 90%);
        color: #333;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1rpx solid hsl(0, 0%, 87%);
    }
    .current-date {
        font-size: 32rpx;
        color: #333;
        font-weight: bold;
    }
}

.calendar-layout { 
    width: 100%;
    padding:15rpx 30rpx;
    transition: all 0.15s;
} 

.calendar-layout .calendar-weeks {
    display: flex;
    align-items: center;
    justify-content: center;
    
    .week {
        width: 84rpx;
        height: 84rpx;
        display: flex;
        align-items: center;
        justify-content:center;
        font-size: 28rpx;
        color: hsl(0, 0%, 60%);
        text-align: center;
        padding: 20rpx 0;
    }
}

.calendar-layout .calendar-days {
    display: flex;
    align-items: center;
    justify-content: center;
    .day {
        width: 84rpx;
        height: 84rpx;
        display: flex;
        align-items: center;
        justify-content:center;
        padding: 20rpx 0;
        font-size: 30rpx;
        font-weight: bold;
        color: hsl(0, 0%, 30%);
        border-radius: 20rpx;
        transition: all 0.15s;
    }
    .no-month {
        color: #999;
    }
    .active-day {
        background-color: #fe6b42; 
        color: #fff; 
    }
    .active-section {
        background-color: #fe6b42; 
        color: #fff; 
        opacity: 0.1;
    }
}

.calendar-btns {
    width: 100%;
    display: flex;
    align-items: center; 
    justify-content: space-between;
    padding: 40rpx; 
    padding-top: 20rpx; 
    .btn {
        width: calc(~'50% - 15rpx');
        height: 100rpx;
        border-radius: 18rpx;
        text-align: center;
        line-height: 100rpx;
        font-size: 34rpx;
        font-weight: bold;
    }
    .calendar-cancel {
        color: #333;
        background-color: #f2f2f2;
    }
    .calendar-confirm {
        background-color: #fe6b42;
        color: #fff;
    }
}